<template>
	<view class="page">
		<view class="header">
			<view class="input-view">
				<uni-icon type="search" size="22" color="#666666"></uni-icon>
				<input class="input" type="text" placeholder="好友的用户名\邮箱\手机" @input="handleInput" :focus="true" />
			</view>
		</view>
		<view class="uni-list" v-show="showSearchText" @tap="search">
			<view class="uni-list-cell">
				<view class="uni-media-list">
					<view class="uni-media-list-logo">
						<view class="search-box">
							<view class="uni-icon uni-icon-search"></view>
						</view>
					</view>
					<view class="uni-media-list-body" style="align-items: center;justify-content:start;flex-direction:row">
						<text class="search-label">搜索:</text><text class="search-text">{{keyword}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="search-main" v-if="hasNoData || list.length>0" style="margin-top: 10px;">
			<view class="search-main-errtitle" v-if="hasNoData">无搜索结果</view>
			<view class="uni-list" v-if="list.length>0">
				<view class="uni-list-cell" hover-class="none" v-for="(item,index) of list" @tap="handleClick(item.id)" :key="index">
					<view class="uni-media-list">
						<view class="uni-media-list-logo">
							<image :src="item.avatar" :lazy-load="true"></image>
						</view>
						<view class="uni-media-list-body">
							<view class="uni-list-cell-navigate">{{item.nickname}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from '@dcloudio/uni-ui/lib/uni-icon/uni-icon.vue';
	import websocket from '../../util/websocket';
	import _hook from '../../util/_hook';
	import _data from '../../util/_data';
	import friend from '../../util/api/friend';

	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				is_type: 0,
				keyword: '',
				list: [],
				timer: null,
				hasNoData:false
			}
		},
		onShow() {
			_hook.routeSonHook();
		},
		computed: {
			staticPhoto() {
				return _data.staticPhoto();
			},
			showSearchText() {
				return this.keyword.length > 0;
			}
		},
		watch: {
			keyword(new_val, old_val) {

			}
		},
		methods: {
			handleInput(e) {
				this.keyword = e.detail.value
				this.hasNoData=false
				this.list =[]
			},
			handleClick(id) {
				uni.navigateTo({
					url: ('../friend/detail?user_id=' + id + '&is_type=' + this.is_type),
				});
			},
			search(){
				this.hasNoData=false;
				friend.search(this.keyword).then(res => {
					if(res.data.list.length==0){
						this.hasNoData=true;
					}
					this.list = res.data.list;
					this.is_type = res.data.is_type;
				})
			}
		}
	}
</script>

<style>
	.uni-list-cell::after{
		left: 70px;
	}
	.uni-list:after{
		display: none;
	}
	.search-main {
		height: 100%;
		background-color: #fff;
		overflow: hidden;
	}

	.search-main-errtitle {
		width: 100%;
		line-height: 92upx;
		font-size: 32upx;
		border-bottom: 1px solid #e5e5e5;
		text-align: center;
		padding: 80upx 0;
	}

	.header {
		display: flex;
		flex-direction: row;
		padding: 10px 15px;
		align-items: center;
	}

	.input-view {
		display: flex;
		align-items: center;
		flex-direction: row;
		background-color: #e7e7e7;
		height: 30px;
		border-radius: 5px;
		padding: 0 10px;
		flex: 1;
	}

	.input {
		flex: 1;
		padding: 0 5px;
		height: 24px;
		line-height: 24px;
		font-size: 16px;
	}

	.search-box {
		background-color: #02B300;
		border-radius: 5px;
		color:#fff;
		text-align: center;
		display: flex;
		height: 100%;
		align-items: center;
		flex-direction: row;
		justify-content: center;
	}
	.search-box .uni-icon{
		color: #fff;
	}
	.search-label{font-weight: bold;}
	.search-text{
		color: #02B300;
		margin-left: 8px;
	}
</style>
